<template>
  <div class="music">
  
    <div id="top">
       <div  @click="gotoPage(itm.path)" v-for="(itm,index) in list" :key="index">
         <div :class="{itm:true ,add:activepath===itm.path}" >
         <i :class="itm.i"></i>
        <span>{{itm.name}}</span>
        </div>
     </div>


     
     
    </div>

     
     <router-view/>
  </div>
</template>
<script>


export default {
  name:'Music',
  data() {
    return{
      activepath:'home',
      list:[
        {
          name:"首页",
          i:"iconfont icon-fenlei",
          path:"home"
        },
        {
          name:"榜单",
          i:"iconfont icon-yingyongzhongxin",
          path:"top"
        },
        {
           name:"返回登录",
          i:"iconfont icon-shouye",
          path:"login"
        },
        {
           name:"我的",
          i:"iconfont icon-wode",
          path:"me"
        },
        {
           name:"搜索",
          i:"iconfont icon-sousuo",
          path:"search"
        },
      ],

     
    } 
  },
  methods:{
    gotoPage(path){
      this.$router.push('/'+path)
      
      this.activepath=path
    }
  }
}
</script>


<style lang="less" scoped>
.music{
 #top{
  width: 100%;
  background-color: rgb(84, 108, 216);
  justify-content: space-around;
  align-items: center;
  height: 70px;
  display: flex;
 
}
.itm{
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}
.itm:active{
  color: rgb(33, 247, 13);
}
.itm .iconfont{
font-size: 28px;
}
.add{
  color: red;
}

}




</style>
